<template>
  <button @click="changeDisplay('ChildA')">Toggle Child A</button>
  <button @click="changeDisplay('ChildB')">Toggle Child B</button>
  <slotted />
  <button @click="changeDisplay(ChildA)">Toggle Child A</button>
  <button @click="changeDisplay(ChildB)">Toggle Child B</button>
  <slotted2 />
</template>
<script setup>
import { useSlots, reactive } from 'vue'
import ChildA from './ChildA.vue'
import ChildB from './ChildB.vue'
const slots = useSlots()
const slotted = () => slots.default().map(vnode => hide.has(vnode.type.name) ? null : vnode);
const slotted2 = () => slots.default().map(vnode => hide.has(vnode.type) ? null : vnode);

const hide = reactive(new Set);

function changeDisplay(whichChild) {
  hide.has(whichChild) ? hide.delete(whichChild) : hide.add(whichChild);
}
</script>